<template>
  <div class="flexarea">
    <div class="left">
      <ul class="top">
        <li><a href="javascript:;"></a><span>当前</span></li>
        <li><a href="javascript:;"></a><span>未答</span></li>
        <li><a href="javascript:;"></a><span>已答</span></li>
        <li><a href="javascript:;"></a><span>标记</span></li>
      </ul>
      <div class="bottom">
        <div>
          <p>单选题</p>
          <div class="choice">
            <div class="question" v-for="(item,index) in radios"
                 v-bind:class="{'completed': item.completed, 'marked': item.mark, 'cur': item.cur}"
                 :key="item.id" @click="radioChoose(index)">
              {{ index + 1 }}
            </div>
          </div>
        </div>
        <div>
          <p>多选题</p>
          <div class="choice">
            <div class="question" v-for="(item,index) in multiples"
                 v-bind:class="{'completed': item.completed, 'marked': item.mark, 'cur': item.cur}"
                 :key="item.id" @click="multipleChoose(index)">
              {{ index + 1 }}
            </div>
          </div>
        </div>
        <div>
          <p>填空题</p>
          <div class="choice">
            <div class="question" v-for="(item,index) in fillings"
                 v-bind:class="{'completed': item.completed, 'marked': item.mark, 'cur': item.cur}"
                 :key="item.id" @click="fillingChoose(index)">
              {{ index + 1 }}
            </div>
          </div>
        </div>
        <div>
          <p>简答题</p>
          <div class="choice">
            <div class="question" v-for="(item,index) in shorts"
                 v-bind:class="{'completed': item.completed, 'marked': item.mark, 'cur': item.cur}"
                 :key="item.id" @click="shortChoose(index)">
              {{ index + 1 }}
            </div>
          </div>
        </div>
        <div class="final" @click="dialogVisible = true">结束考试</div>
      </div>
    </div>
    <div class="right">
      <div class="top">
        <span style="margin-left: 20px;letter-spacing:5px">沉着冷静，仔细认真</span>
        <div style="display: flex; ">
          <span style="text-align: right; margin-right: 20px;">全卷共{{radios.length + multiples.length + fillings.length + shorts.length}}题</span>
          <div id="countdown">111</div>
        </div>
      </div>
      <div class="middle">
       <div class="content">
          <div class="quesStem">
            {{curQuestion[0] + 1}}.{{curQuestion[1] + 1}} &nbsp; {{curQuesDetail.stem}}
          </div>
          <div class="option" v-if="curQuestion[0]==0">
            <el-radio-group v-model="radio" @change="getRadio" >
              <el-radio label="A"><span class="optiontext">{{ curQuesDetail.options.A  }}</span></el-radio>
              <el-radio label="B"><span class="optiontext">{{ curQuesDetail.options.B }}</span></el-radio>
              <el-radio label="C"><span class="optiontext">{{ curQuesDetail.options.C }}</span></el-radio>
              <el-radio label="D"><span class="optiontext">{{ curQuesDetail.options.D }}</span></el-radio>
            </el-radio-group>
          </div>
          <div class="option" v-if="curQuestion[0]==1">
            <el-checkbox-group v-model="multiple111" @change="getMultiple">
              <el-checkbox label="A"><span class="optiontext">{{ curQuesDetail.options.A }}</span></el-checkbox>
              <el-checkbox label="B"><span class="optiontext">{{ curQuesDetail.options.B }}</span></el-checkbox>
              <el-checkbox label="C"><span class="optiontext">{{ curQuesDetail.options.C }}</span></el-checkbox>
              <el-checkbox label="D"><span class="optiontext">{{ curQuesDetail.options.D }}</span></el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="input" @change="getFilling" v-if="curQuestion[0]==2">
            <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="filling"></el-input>
          </div>
          <div class="input" @change="getShort" v-if="curQuestion[0]==3">
            <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="shortQues"></el-input>
          </div>
        </div>
      </div>
      <div class="bottom">
        <ul class="end" >
          <li @click="previous"><span>上一题</span></li>
          <li @click="mark"><span>标记</span></li>
          <li @click="next"><span>下一题</span></li>
        </ul>
      </div>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>你确定要交卷吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">再检查一下</el-button>
        <el-button type="primary" @click="commit">确认交卷</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible2"
      width="30%"
      :before-close="handleClose2">
      <span>距离考试结束还剩十五分钟！</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">确认</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { getPaperQuestionOrder, getQuestionById, getExamById, postPaper } from '../../../api/students.js'
export default {
  name: 'Paper',
  data () {
    return {
      examid: this.$route.query.examId,
      exam: {},
      studentNum: sessionStorage.getItem('studentNumber'),
      paperid: 0,
      questionOrder: [],
      curQuesDetail: {
        id: 0,
        stem: '',
        // eslint-disable-next-line standard/object-curly-even-spacing
        options: { A: '', B: '', C: '', D: ''},
        questionType: ''
      },
      curQuestion: [0, 0],
      preQuestion: [-1, -1],
      time: 45, // 考试持续时间（分钟）
      radio: '',
      radioAns: [],
      multiple111: [ ],
      multipleAns: [],
      filling: '',
      fillingAns: [],
      shortQues: '',
      shortAns: [],
      radios: [],
      multiples: [],
      fillings: [],
      shorts: [],
      options: ['A', 'B', 'C', 'D'],
      countdownTime: '',
      dialogVisible: false,
      dialogVisible2: false
    }
  },
  created () {
    this.getExamInfo()
    this.initPaper()
    this.countDown()
  },
  methods: {
    initPaper () {
      // 获取题目位置
      getPaperQuestionOrder(this.examid, this.studentNum).then(res => {
        this.questionOrder = res.data.data
        for (var i = 0; i < this.questionOrder.length; i++) {
          if (this.questionOrder[i].length > 0) {
            for (var num = 0; num < this.questionOrder[i].length; num++) {
              var temp = {}
              temp.num = this.questionOrder[i][num]
              temp.mark = false
              temp.completed = false
              temp.cur = false
              this.questionOrder[i][num] = temp
            }
          }
        }
        this.radios = this.questionOrder[0]
        this.multiples = this.questionOrder[1]
        this.fillings = this.questionOrder[2]
        this.shorts = this.questionOrder[3]
        this.radios[0].cur = true

        if (Array.isArray(this.questionOrder[0]) && this.questionOrder[0].length > 0) {
          this.radioAns = new Array(this.questionOrder[0].length + 1).fill({questionId: 0, content: ''})
        } else this.radioAns = []
        if (Array.isArray(this.questionOrder[1]) && this.questionOrder[1].length > 0) {
          this.multipleAns = new Array(this.questionOrder[1].length + 1).fill({questionId: 0, content: []})
        } else this.multipleAns = []
        if (Array.isArray(this.questionOrder[2]) && this.questionOrder[2].length > 0) {
          this.fillingAns = new Array(this.questionOrder[2].length + 1).fill({questionId: '', content: ''})
        } else this.fillingAns = []
        if (Array.isArray(this.questionOrder[3]) && this.questionOrder[3].length > 0) {
          this.shortAns = new Array(this.questionOrder[3].length + 1).fill({questionId: '', content: ''})
        } else this.shortAns = []
        console.log('radioAns')
        console.log(this.radioAns)
        this.getQuestionById()
      })
    },
    getExamInfo () {
      getExamById(this.examid).then(res => {
        this.exam = res.data.data
        console.log(this.exam)
      })
    },
    getQuestionById () {
      var id = this.questionOrder[this.curQuestion[0]][this.curQuestion[1]].num
      getQuestionById(id).then(res => {
        var temp = res.data.data.list[0]
        var pstem = JSON.parse(temp.questionStem)
        temp.stem = pstem.stem
        if (pstem.options) {
          temp.options = pstem.options
        }
        this.curQuesDetail = temp
      })
    },

    // 四种题型题号变化
    clearCur () {
      if (this.preQuestion[0] !== this.curQuestion[0] || this.preQuestion[1] !== this.curQuestion[1]) {
        if (this.preQuestion[0] === 1) this.multiples[this.preQuestion[1]].cur = false
        if (this.preQuestion[0] === 2) this.fillings[this.preQuestion[1]].cur = false
        if (this.preQuestion[0] === 3) this.shorts[this.preQuestion[1]].cur = false
        if (this.preQuestion[0] === 0) this.radios[this.preQuestion[1]].cur = false
      }
      this.getQuestionById()
    },
    radioChoose (index) {
      console.log('QAQ')
      console.log(this.radioAns)
      this.preQuestion[0] = this.curQuestion[0]
      this.preQuestion[1] = this.curQuestion[1]
      this.curQuestion[0] = 0
      this.curQuestion[1] = index
      this.radios[index].cur = true
      this.clearCur()
      console.log(this.curQuestion[0] + ',' + this.curQuestion[1])
      this.radio = this.radioAns[this.curQuestion[1]].content
      console.log('=皿=')
      console.log(this.radioAns)
    },
    multipleChoose (index) {
      this.preQuestion[0] = this.curQuestion[0]
      this.preQuestion[1] = this.curQuestion[1]
      this.curQuestion[0] = 1
      this.curQuestion[1] = index
      this.multiples[index].cur = true
      this.clearCur()
      this.multiple111 = this.multipleAns[this.curQuestion[1]].content
      console.log(this.multipleAns)
    },
    fillingChoose (index) {
      this.preQuestion[0] = this.curQuestion[0]
      this.preQuestion[1] = this.curQuestion[1]
      this.curQuestion[0] = 2
      this.curQuestion[1] = index
      this.fillings[index].cur = true
      this.clearCur()
      this.filling = this.fillingAns[this.curQuestion[1]].content
    },
    shortChoose (index) {
      this.preQuestion[0] = this.curQuestion[0]
      this.preQuestion[1] = this.curQuestion[1]
      this.curQuestion[0] = 3
      this.curQuestion[1] = index
      this.shorts[index].cur = true
      this.clearCur()
      this.shortQues = this.shortAns[this.curQuestion[1]].content
    },
    handleClose () {
      this.dialogVisible = false
    },
    handleClose2 () {
      this.dialogVisible2 = false
    },
    // 提交试卷
    commit () {
      console.log('commit')
      var studentId = sessionStorage.getItem('studentId')
      var ansList = []
      for (var i = 0; i < this.radioAns.length - 1; i++) {
        ansList.push(this.radioAns[i])
      }
      for (var j = 0; j < this.multipleAns.length - 1; j++) {
        ansList.push(this.multipleAns[j])
      }
      console.log('22')
      for (var k = 0; k < this.fillingAns.length - 1; k++) {
        ansList.push(this.fillingAns[k])
      }
      console.log('33')
      for (var m = 0; m < this.shortAns.length - 1; m++) {
        ansList.push(this.shortAns[m])
      }
      console.log('44')
      console.log(ansList)
      this.dialogVisible = false
      this.$router.push('/student/finishExam')
      postPaper(this.examid, studentId, ansList).then(res => {
        this.dialogVisible = false
      })
    },
    // 点击获取答案编号
    getRadio (value) {
      var ans = {content: '', questionId: 0}
      ans.content = this.radio
      ans.questionId = this.questionOrder[this.curQuestion[0]][this.curQuestion[1]].num
      this.radioAns[this.curQuestion[1]] = ans
      this.radios[this.curQuestion[1]].completed = true
    },
    getMultiple (value) {
      console.log(value)
      var ans = {content: '', questionId: 0}
      ans.content = this.multiple111
      ans.questionId = this.questionOrder[this.curQuestion[0]][this.curQuestion[1]].num
      this.multipleAns[this.curQuestion[1]] = ans
      this.multiples[this.curQuestion[1]].completed = true
      console.log(this.multipleAns)
    },
    getFilling (value) {
      var ans = {content: '', questionId: 0}
      ans.content = this.filling
      ans.questionId = this.questionOrder[this.curQuestion[0]][this.curQuestion[1]].num
      this.fillingAns[this.curQuestion[1]] = ans
      this.fillings[this.curQuestion[1]].completed = true
      console.log(this.fillingAns)
    },
    getShort (value) {
      console.log(value)
      var ans = {content: '', questionId: 0}
      ans.content = this.shortQues
      ans.questionId = this.questionOrder[this.curQuestion[0]][this.curQuestion[1]].num
      this.shortAns[this.curQuestion[1]] = ans
      this.shorts[this.curQuestion[1]].completed = true
      console.log(this.shortAns)
    },
    // 上一题、标记、下一题
    previous () {
      this.preQuestion[0] = this.curQuestion[0]
      this.preQuestion[1] = this.curQuestion[1]
      if (this.curQuestion[1] <= 0) {
        if (this.curQuestion[0] <= 0) {
          this.$message.info('已经是第一题了！')
        } else {
          this.curQuestion[0]--
          this.curQuestion[1] = this.questionOrder[this.curQuestion[0]].length - 1
        }
      } else {
        this.curQuestion[1]--
      }
      if (this.curQuestion[0] === 1) this.multiples[this.curQuestion[1]].cur = true
      if (this.curQuestion[0] === 2) this.fillings[this.curQuestion[1]].cur = true
      if (this.curQuestion[0] === 3) this.shorts[this.curQuestion[1]].cur = true
      if (this.curQuestion[0] === 0) this.radios[this.curQuestion[1]].cur = true
      this.clearCur()
      this.radio = this.radioAns[this.curQuestion[1]].content
      this.multiple = this.multipleAns[this.curQuestion[1]].content
      this.filling = this.fillingAns[this.curQuestion[1]].content
      this.short = this.shortAns[this.curQuestion[1]].content
    },
    mark () {
      if (this.curQuestion[0] === 1) this.multiples[this.curQuestion[1]].mark = !this.multiples[this.curQuestion[1]].mark
      if (this.curQuestion[0] === 2) this.fillings[this.curQuestion[1]].mark = !this.fillings[this.curQuestion[1]].mark
      if (this.curQuestion[0] === 3) this.shorts[this.curQuestion[1]].mark = !this.shorts[this.curQuestion[1]].mark
      if (this.curQuestion[0] === 0) this.radios[this.curQuestion[1]].mark = !this.radios[this.curQuestion[1]].mark
    },
    next () {
      this.preQuestion[0] = this.curQuestion[0]
      this.preQuestion[1] = this.curQuestion[1]
      if (this.curQuestion[1] > this.questionOrder[this.curQuestion[0]].length - 2) {
        if (this.curQuestion[0] > 2) {
          this.$message.info('已经是最后一题了！')
        } else {
          this.curQuestion[0]++
          this.curQuestion[1] = 0
        }
      } else {
        this.curQuestion[1]++
      }
      if (this.curQuestion[0] === 1) this.multiples[this.curQuestion[1]].cur = true
      if (this.curQuestion[0] === 2) this.fillings[this.curQuestion[1]].cur = true
      if (this.curQuestion[0] === 3) this.shorts[this.curQuestion[1]].cur = true
      if (this.curQuestion[0] === 0) this.radios[this.curQuestion[1]].cur = true
      this.clearCur()
      this.radio = this.radioAns[this.curQuestion[1]].content
      this.multiple = this.multipleAns[this.curQuestion[1]].content
      this.filling = this.fillingAns[this.curQuestion[1]].content
      this.short = this.shortAns[this.curQuestion[1]].content
    },
    countDown () {
      let that = this
      // var countdown = document.getElementById('countdown')
      count()
      setInterval(count, 1000)
      function count () {
        var nowtime = new Date() // 返回的是当前时间总的毫秒数
        // var ddl = new Date(this.exam.endTime) // 返回的是用户输入时间总的毫秒数
        var ddl = new Date('2022-04-14 16:22:00')
        var times = (ddl - nowtime) / 1000 // 剩余时间总的毫秒数
        // eslint-disable-next-line no-unused-vars
        var h = parseInt(times / 60 / 60 % 24) // 时
        h = h < 10 ? '0' + h : h
        // eslint-disable-next-line no-unused-vars
        var m = parseInt(times / 60 % 60) // 分
        m = m < 10 ? '0' + m : m
        // eslint-disable-next-line no-unused-vars
        var s = parseInt(times % 60) // 当前的秒
        s = s < 10 ? '0' + s : s
        // eslint-disable-next-line
        if (h == '00' && m == 15 && s == '00') {
          that.dialogVisible2 = true
          console.log('true!')
        }
        // eslint-disable-next-line
        if (h == '00' && m == '00' && s == '00') {
          that.commit()
        }
        var countdownTime = h + '小时' + m + '分' + s + '秒'
        // console.log(countdownTime)
        document.getElementById('countdown').innerHTML = countdownTime
      }
    }
  }
}
</script>

<style scoped>
/*global*/
.flexarea {
  display: flex;
  height: 100vh;
  background-color: #e5e4e9;
}

/*left part*/
.left {
  width: 260px;
  height: 100%;
  margin: 0px 0px 0px 20px;
}

/*left-top*/
.left .top {
  display: flex;
  justify-content: space-around;
  padding: 16px 0px;
  border: 5px solid #ffffff;
  border-radius: 10px;
  margin-bottom: 10px;
  background-color: #fff;
  /*background-color: #42b983;*/
}

/*四种题目状态*/
.left .top li {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.left .top li a {
  display: inline-block;
  padding: 10px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #00aa00;
}

.left .top li:nth-child(2) a {
  border: 1px solid #eee;
}

.left .top li:nth-child(3) a {
  background-color: #5188b8;
  border: none;
}

.left .top li:nth-child(4) a {
  position: relative;
  border: 1px solid #eee;
}

.left .top li:nth-child(4) a::before {
  width: 4px;
  height: 4px;
  content: " ";
  position: absolute;
  background-color: red;
  border-radius: 50%;
  top: 0px;
  left: 16px;
}

/*left-bottom*/
.left .bottom {
  border: 5px solid #ffffff;
  border-radius: 10px;
  padding: 16px 0px;
  background-color: #fff;
}

/*题型选择区*/
.left .bottom .choice {
  display: flex;
  flex-wrap: wrap;
  margin-left: 10px;
}

/*题型名称区*/
.left .bottom p {
  margin: 10px auto;
  color: #000;
  letter-spacing: 2px;
}

/*题号圈圈*/
.left .bottom .choice .question {
  width: 30px;
  height: 30px;
  line-height: 30px;
  float: left;
  border-radius: 50%;
  background-color: #ffffff;
  border: 1px solid #eee;
  margin: 2px;
  color: #000;
  font-size: 16px;
  align-items: center;
  cursor: pointer;
  position: relative;
  justify-content: center;
}

.left .bottom .choice .completed {
  background-color: #5188b8;
}

.left .bottom .choice .marked:before {
  width: 7px;
  height: 7px;
  content: " ";
  position: absolute;
  background-color: red;
  border-radius: 50%;
  top: 0px;
  left: 23px;
}

.left .bottom .choice .cur {
  border: 1px solid #00aa00;
}

/*结束考试按钮*/
.left .bottom .final {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  background-color: #5188b8;
  width: 200px;
  margin: 20px 10px 20px 10px;
  border-radius: 4px;
  height: 30px;
  line-height: 30px;
  color: #fff;
  margin-top: 22px;
}

/*right part*/
.right {
  width: 80%;
  height: 100%;
  color: #000000;
  font-size: 18px;
  margin: 5px 10px;
  border-radius: 4px;
}

/*right-top: 提示栏*/
.right .top {
  padding-right: 30px;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: #fff;
  height: 50px;
  line-height: 50px;
  border: 5px solid #ffffff;
  border-radius: 10px;
}

/*right-middle*/
.right .middle {
  height: 450px;
  background-color: #fff;
  padding: 20px 0px 10px;
  border: 5px solid #ffffff;
  border-radius: 10px;
}

/*题号*/
.right .middle .number {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #000000;
  width: 20px;
  height: 20px;
  background-color: rgba(81,136,184,70%);
  border-radius: 8px;
  margin-right: 15px;
}

.right .middle .content {
  display: flex;
  flex-direction: column;
}
.right .middle .content .quesStem {
  text-align: left;
  margin: 0 30px;
}

/*单选框组*/
.right .middle .option .el-radio-group {
  text-align: left;
  padding-left: 90px;
  display: flex;
  flex-direction: column;
  margin-top: 30px;
  margin-bottom: 50px;
}

.right .middle .option .el-radio-group label {
  color: #000000;
  margin: 5px 0px;
  font-size: large;
}

/*多选题组*/
.right .middle .option .el-checkbox-group {
  text-align: left;
  padding-left: 90px;
  display: flex;
  flex-direction: column;
  margin-top: 30px;
  margin-bottom: 50px;
}

.right .middle .option .el-checkbox-group label {
  color: #000000;
  margin: 5px 0px;
  font-size: large;
}

/*填空题、简答题输入框*/
.right .middle .input {
  text-align: left;
  padding-left: 40px;
  padding-right: 40px;
  margin-top: 30px;
  margin-bottom: 50px;
}

/*参考答案*/
.right .middle .answer {
  color: #000000;
  font-size: 18px;
  text-align: left;
  background-color: #eeeeee;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
  margin-left: 15px;
  margin-right: 15px;
  border: 10px solid #eee;
  border-radius: 10px;
  display: inline-flex;
}

/*right -bottom*/
.right .bottom {
  height: 70px;
  background-color: #fff;
  margin-top: 10px;
  border: 1px solid #ffffff;
  border-radius: 10px;
}

.right .bottom .end {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #5188b8;
  list-style-type: none;
}

/*上一题下一题标记*/
.right .bottom .end li {
  cursor: pointer;
  margin: 0 100px;
  font-size: 16px;
}

/*标记*/
.right .bottom .end li:nth-child(2) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(81,136,184,90%);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  color: #fff;
}
</style>
